<template>
  <div class="feiyong">
    <div id="zdy-banner">
      <img src="/image/6YMDKtK8SSi6k0Wyx0BVQQ.png" />
    </div>

    <!-- 正文 -->
    <div id="d">
      <!-- <img src="/image/POe0uq7aSqOsp9MHrjQ-ag.png" alt="" /> -->
      <div id="d1"></div>
      <div id="d2"></div>
    </div>
  </div>
</template>
<script >
</script>

<script>
let mySeries = [];
let mySeries2 = [];
export default {
  methods: {
    getData() {
      let url = "/price.json";
      this.axios.get(url).then((res) => {
        for (let key in res.data) {
          // key就是对象的索引
          mySeries.push({
            name: key,
            type: "bar",
            data: res.data[key],
          });
        }
        this.drawChart();
      });
    },
    drawChart() {
      // 绘制折线图
      let chart = this.echarts.init(document.getElementById("d1"));

      let option = {
        title: {
          text: "乐xiao趣2021年销售明细",
          x: "center",
          textStyle: {
            fontSize: 30,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 6,
          right: 100,
          data: ["较差", "一般", "较好", "很好"],
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["月均销售", "其他收益"],
        },
        yAxis: {
          type: "value",
          min: 50,
          max: 340000,
        },
        series: mySeries,
        barWidth: "30",
      };
      chart.setOption(option);
    },

    getData2() {
      let url = "/price2.json";
      this.axios.get(url).then((res) => {
        for (let key in res.data) {
          // key就是对象的索引
          mySeries2.push({
            name: key,
            type: "bar",
            data: res.data[key],
          });
        }
        this.drawChart2();
      });
    },
    drawChart2() {
      // 绘制折线图
      let chart = this.echarts.init(document.getElementById("d2"));

      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 6,
          right: 100,
          data: ["较差", "一般", "较好", "很好"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["日均销售", "毛利率(35%)"],
        },
        yAxis: {
          type: "value",
          min: 50,
          max: 12000,
        },
        series: mySeries2,
        barWidth: "30",
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.getData();
    this.getData2();
  },
};
</script>

<style src='../assets/css/jm feiyong.css' scoped>
</style>

